<template>
  <div>
    <el-dialog
      title="今日课程学习情况"
      :visible.sync="isShow"
      width="1100px"
      destroy-on-close
      @close="close"
    >
      <div>
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          label-width="68px"
          class="form-search"
        >
          <el-form-item label="课程名称" prop="teacherNum">
            <el-input
              class="input-width"
              v-model="queryParams.courseName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="分院名称" prop="name">
            <el-select v-model="queryParams.branchId" placeholder="请选择" clearable class="input-width">
              <el-option
                v-for="(item, index) in branch"
                :key="index"
                :label="item.branchName"
                :value="item.branchId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="主讲教师" prop="name">
            <el-input
              class="input-width"
              v-model="queryParams.teacherName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item class="search-button">
            <el-button
              v-preventReClick
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >
              搜索
            </el-button>
            <el-button
              v-preventReClick
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <div class="table_h">
          <el-table
            v-loading="loading"
            :data="postList"
            style="width: 100%"
            size="mini"
            :row-style="{height: '0'}"
            :cell-style="{padding: '3px'}"
            :header-row-style="{height: '0'}"
            :header-cell-style="{height: '0'}"
          >
            <el-table-column label="排名" align="center" prop="sort">

            </el-table-column>
            >
            <el-table-column label="课程名称" align="center" prop="courseName" show-overflow-tooltip/>
            <el-table-column label="分院名称" align="center" prop="branchName" show-overflow-tooltip/>
            <el-table-column label="主讲教师" align="center" prop="principalName"
            />
            <el-table-column label="活跃人数" align="center" prop="activeCount"
                             show-overflow-tooltip
            />
            <el-table-column label="未结课人数" align="center" prop="studyCount"/>
            <el-table-column label="活跃人数占比" align="center" prop="studyPercent" sortable/>
            <el-table-column label="详情" align="center" prop="active">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="lookdetail(scope.row.courseId)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </div>
      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button type="primary" @click="lookdetail()">打开</el-button>-->
      <!--      </span>-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
    <Lookdetail ref="lookdetail"></Lookdetail>
  </div>
</template>
<script>

import { listPost_branch } from '@/api/schoolOrganization/organization'
import { listPost_teacher } from '@/api/schoolOrganization/teacher'
import Lookdetail from '@/views/activeDetail/todayStudyDetail.vue'
import { getTodaystudyList } from '@/api/homePage'

export default {

  components: { Lookdetail },
  name: 'todayStudy',
  data() {
    return {
      loading: true,
      isShow: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        branchId: '',
        teacherName: '',
        courseName: ''
      },
      branch: [],
      teachers: [],
      postList: [],
      total: 20

    }
  },
  mounted() {
  },
  methods: {
    resetQuery() {
      // 把queryParams清空
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        branchId: '',
        teacherName: '',
        courseName: ''
      }
      this.handleQuery()
    },
    show() {
      this.isShow = true
      this.handleQuery()
      this.getBranchList()
      this.getteacherList()
    },
    handleQuery() {
      this.loading = true
      getTodaystudyList(this.queryParams).then(res => {
        let { code, rows, total } = res
        if (code == 200) {
          this.total = total
          rows.forEach(e => {
            e.studyPercent += '%'
          })
          this.postList = rows
        }

      }).finally(() => {
        this.loading = false
      })
      //请求数据
      // 请求之后不管成功还是失败都要把loading改为false
    },
    // 获取分院
    getBranchList() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then(res => {
        if (res.code == 200) {
          this.branch = res.rows
        }
      })
    },
    // 获取教师
    getteacherList() {
      listPost_teacher({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then(res => {
        if (res.code == 200) {
          console.log(res.rows, 'skdkdkdd')
          this.teachers = res.rows
        }
      })
    },
    lookdetail(courseId) {
      this.$refs.lookdetail.show(courseId)
    },
    close() {
      this.isShow = false
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        branchId: '',
        teacherId: '',
        courseName: ''
      }
      this.branch = []
      this.teachers = []
      this.postList = []
      this.total = 0
    }

  }
}
</script>
<style scoped lang="scss">
.input-width {
  width: 150px;
}

.form-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.search-button {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

:deep(.pagination-container) {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

::v-deep .el-form-item--small.el-form-item:not(:first-child) {
  margin-left: 20px;
}

.table_h {
  height: 455px;
  overflow: scroll
}
</style>
